<template>
  <div>
    <mtHeader
      fixed
      :title=title
      style="background: linear-gradient(0deg, #399f00, #26701a);height:1rem"
    >
        <div class="header-left iconfont" slot="left" @click="$router.back(-1)">&#xe623;</div>
        <div slot="right" class="iconfont header-left" @click="btnSort" :class="{active: isActive}">&#xe73a;</div>
    </mtHeader>
    <div class="container">
      <iframe id='web' class="web" :src=url ref="content"></iframe>
      <div class="line-w"></div>
      <div class="rel">
          <div class="rel-cn1"></div>
          <p class="rel-cn2">相关内容</p>
         
      </div>
       <relevant :relevantList=relevantList></relevant>
    </div>
    <mt-popup
      v-model="isActive"
      popup-transition="popup-fade" class="mask">
      <div slot class="mask-con">
        <p class="mask-cn1" @click="changeSort('默认排序')">默认排序</p>
        <div class="line-h"></div>
        <p class="mask-cn2" @click="changeSort('时间排序')">时间排序</p>
      </div>
    </mt-popup>
  </div>
</template>
<script>
import { Header,Popup  } from "mint-ui";
import relevant from '../components/relevant'
export default {
  name: "myCircle",
  components: {
    mtHeader: Header,
    mtPopup:Popup,
    relevant
  },
  data: function() {
    return {
      url:'http://m.178ty.com/discovery/v2/news/szc/dlt/2020/0311/38885.html',
      title: "足球",
      sort: "默认排序",
      isActive:false,
      relevantList:[
        {title:'欧冠|逆转',time:'1小时前',imgUrl:'/static/img/deatilBg.png',content:'欧冠逆转成疯！尤文曼联不屈皇马太惨 巴萨小心了'},
        {title:'欧冠|逆转',time:'1小时前',imgUrl:'/static/img/deatilBg.png',content:'欧冠逆转成疯！尤文曼联不屈皇马太惨 巴萨小心了'},
        {title:'欧冠|逆转',time:'1小时前',imgUrl:'/static/img/deatilBg.png',content:'欧冠逆转成疯！尤文曼联不屈皇马太惨 巴萨小心了'},
      ]
    };
  },
  methods: {
    btnSort() {
    //   this.isActive=!this.isActive;
    },
    changeSort(p){
      if(this.sort==p){
        return;
      }
      this.sort=p;
      this.isActive=false
    },
    reSetSize(){
        // console.log(this.$refs)
        // var windowsHeight = window.innerHeight;
        // let iframe=this.$refs.content;
        // var bHeight = iframe.contentWindow.document.body.scrollHeight;
        // console.log(bHeight)
        // var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
        // console.log(dHeight)
        // var height = Math.min(bHeight, dHeight);
        // console.log(height)
        // iframe.height = height;
    //   this.$refs.content.height= (windowsHeight-44) + "px";
    //   this.$refs.content.width=window.innerWidth+'px'
    },
  },
   created() {
    
    this.$nextTick(() => {
        //DOM现在更新了
        this.reSetSize();
     });
  },
};
</script>
<style lang="less" scoped>
img{
  width: 100%;
  height: 100%;
}
.line-w{
    width: 100%;
    height: .11rem;
    background: #F5F8FB;
}
iframe{
  border:none;
  width: 100%;
  height: 100vh;
}
.header-left {
  font-size: 0.5rem;
}
.rel{
    display: flex;
    padding:.3rem .23rem;
    align-items: center;
    .rel-cn1{
        width: .06rem;
        height: .27rem;
        background: #389E01;
    }
    .rel-cn2{
        margin-left: .18rem;
        font-size: .28rem;
        color:#4F4F4F;
        font-weight: 600;
    }
}
.container{
    position: relative;
    margin-top: 1rem;
    width: 100%;
    
}
.mask{
  top: 1rem;
  left: 70%;
  transform: none;
  .mask-con{
    width: 2.06rem;
    height: 2.12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    .line-h{
      width: 100%;
      height: 1px;
      background: #E0E0E0;
    }
  }
}
.mask::before{
  width: 0;
  height: 0;
  position: absolute;
  content: "";
  right: .4rem;
  top: -7px;
  border-right: 7px dashed transparent;
  border-bottom: 7px solid currentColor;
  border-left: 7px dashed transparent;
  color: #fff;
}
</style>